<template>
    <div class="main">
        <el-form :rules="rules" ref="registerForm" :model="registerForm" class="loginContainer" label-width="auto">
            <h3 class="registerTitle" style="margin-bottom:20px">注册</h3>
            <el-form-item label="姓名" prop="name" >
                <el-input type="text"  v-model="registerForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="username" >
                <el-input type="text" v-model="registerForm.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password1" >
                <el-input type="password" v-model="registerForm.password1" placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
                <el-input type="tel" v-model="registerForm.phone" placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="registerForm.sex">
                    <el-radio label="1" style="margin-right: 20px;">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-button type="primary" style="width:100%;margin-bottom: 15px;" @click="submitRegister" @keyup.enter="keyDown">注册</el-button>
        </el-form>
    </div>
</template>  

<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
export default {
    data() {  
        return {  
            rules: {
                name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                username: [{ required: true, message: "请输入账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                password1: [
                    { required: true, message: "请确认密码", trigger: "blur" },
                    {
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请确认密码'));
                            } else if (value !== this.registerForm.password) {
                                callback(new Error('两次输入的密码不一致!'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    },
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { type: 'string', pattern: /^1\d{10}$/, message: '请输入有效的手机号码', trigger: 'blur' },
                ],

            },  
            registerForm: {  
                name:'',
                username: '',  
                password: '',  
                password1: '',  
                phone: '',  
                sex: '1',
            },  
              
        };  
    },  
    methods: {  
        submitRegister() {  
            this.$refs.registerForm.validate((valid) => {  
                if (valid) {  
                    axios.post(`/user/register`,this.registerForm).then(result=>{
                        if (result.data.msg == "exist") {
                            this.$message({
                                message: "账号已存在",
                                type: "waring",
                            });
                        } else {
                            this.$message({
                                message: "注册成功",
                                type: "success",
                            });
                            this.$router.push({ name: "login" });
                        }
                    })
                } else {  
                    console.log('表单验证失败!');  
                    return false;  
                }  
            });  
        },  
        keyDown(e){
          //如果是回车则执行登录方法
          if(e.keyCode == 13){
            //需要执行的登录方法
            this.submitRegister();
          }
        },
    },  
    mounted() {
        //绑定事件
        window.addEventListener('keydown',this.keyDown);
    },
    //销毁事件
    destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
    }
}
</script>

<style scoped>

.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 100px auto;
    width: 450px;
    padding: 15px 35px 15px 35px;
    background: aliceblue;
    text-align: left;
}
.custom-form-item .el-form-item__label {  
  /* 减少label的右边距，可能需要根据你的布局调整 */  
  margin-left: 5px; /* 默认可能是12px或更多 */  
} 
.main {
width: 100%;
height: 100vh;
background-image: url("/src/assets/background.jpg");
background-size: 100% 100%;
position: absolute;
}

</style>
